import QtQuick 2.8
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0
Item {
    width: messageSwipe.width
    height: messageSwipe.height
    ListModel {
        id: userlist

        ListElement {
            hImage: "http://img2.woyaogexing.com/2017/12/15/21f96fea84cefa08!400x400_big.jpg"
            username: "水煮蛋小姐"
            msg: "Nin水煮蛋小姐";
            time:"13分钟前"
        }
        ListElement {
            hImage: "http://img2.woyaogexing.com/2017/12/15/21f96fea84cefa08!400x400_big.jpg";
            username: "水煮蛋小姐";
            msg: "Nin水煮蛋小姐";
            time:"13分钟前"
        }
        ListElement {
            hImage: "http://img2.woyaogexing.com/2017/12/15/21f96fea84cefa08!400x400_big.jpg"
            username: "水煮蛋小姐"
            msg: "Nin水煮蛋小姐";
            time:"13分钟前"
        }
        ListElement {
            hImage: "http://img2.woyaogexing.com/2017/12/15/21f96fea84cefa08!400x400_big.jpg"
            username: "水煮蛋小姐"
            msg: "Nin水煮蛋小姐";
            time:"13分钟前"
        }
        ListElement {
            hImage: "http://img2.woyaogexing.com/2017/12/15/21f96fea84cefa08!400x400_big.jpg"
            username: "水煮蛋小姐"
            msg: "Nin水煮蛋小姐";
            time:"13分钟前"
        }
        ListElement {
            hImage: "http://img2.woyaogexing.com/2017/12/15/21f96fea84cefa08!400x400_big.jpg"
            username: "水煮蛋小姐"
            msg: "Nin水煮蛋小姐";
            time:"12月5日"
        }
        ListElement {
            hImage: "http://img2.woyaogexing.com/2017/12/15/21f96fea84cefa08!400x400_big.jpg"
            username: "水煮蛋小姐"
            msg: "Nin水煮蛋小姐";
            time:"23:11"
        }
        ListElement {
            hImage: "http://img2.woyaogexing.com/2017/12/15/21f96fea84cefa08!400x400_big.jpg"
            username: "水煮蛋小姐"
            msg: "Nin水煮蛋小姐";
            time:"13分钟前"
        }
        ListElement {
            hImage: "http://img2.woyaogexing.com/2017/12/15/21f96fea84cefa08!400x400_big.jpg"
            username: "水煮蛋小姐"
            msg: "Nin水煮蛋小姐";
            time:"13分钟前"
        }
        ListElement {
            hImage: "http://img2.woyaogexing.com/2017/12/15/21f96fea84cefa08!400x400_big.jpg"
            username: "水煮蛋小姐"
            msg: "Nin水煮蛋小姐ddddddddddddddddddddddddddddd";
            time:"13分钟前"
        }

    }
    Component {
        id: userModel
        Item {
            width: userMeassagetView.width
            height: dp(50)
            Column {
                Rectangle {
                    id: main
                    width: userMeassagetView.width
                    height: dp(50)
                    color: "#ffffff"
                    Rectangle {
                        id: headerMask
                        width: dp(30)
                        height: width
                        radius: height / 2
                        visible: false
                    }
                    Image {
                        id: headerImage
                        width: headerMask.width
                        height: width
                        source: hImage
                        visible: false
                    }
                    OpacityMask {
                        id: headerImageTmp
                        width: headerMask.width
                        height: width
                        source: headerImage
                        maskSource: headerMask
                        anchors.left: parent.left
                        anchors.leftMargin: dp(10)
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    Rectangle {
                        anchors.left: headerImageTmp.right
                        anchors.leftMargin: dp(5)
                        anchors.top: headerImageTmp.top
                        width: parent.width - headerImageTmp.width - dp(20)
                        height: dp(40)
                        Text {
                            id: userNames
                            text: username
                            topPadding: dp(2)
                            color: "#303030"
                            font.pixelSize: dp(11);
                        }
                        Text {
                            anchors.top: userNames.bottom
                            text: msg
                            color: "#7c7c7c"
                            font.pixelSize: dp(8)
                            topPadding: dp(5)
                            width:parent.width/1.35;
                            elide: Text.ElideRight;

                        }
                        Text
                        {
                            text:time;
                            anchors.right: parent.right;
                            anchors.top:userNames.top;
                            color: "#bbbbbb";
                            rightPadding: dp(5);
                            topPadding: dp(5);
                            font.pixelSize: dp(9);
                        }
                        MouseArea
                        {
                            anchors.fill: parent;
                            onClicked:
                            {
                               stack.push(userchat);
                            }
                        }
                    }
                    Rectangle {
                        width: userMeassagetView.width
                        height: 1
                        color: "#dcdcdc"
                        anchors.bottom: main.bottom
                        z: 1
                    }
                }
            }
        }
    }

    ListView {
        id: userMeassagetView
        model: userlist
        delegate: userModel
        width: parent.width
        height: parent.height - bar.height + dp(6)
        z: 5;
    }
    Userchatwindow
    {
        id:userchat;
        visible: false;
    }
}
